<template>
    <!-- <div>
        <h1>这里是主页！</h1>   
    </div> -->
    <!--最新文章-->
    <section class="mysection">
        <!--  轮播图开始-->
        <div id="carousel-body">
            <swiper :options="swiperOption" ref="mySwiper" >
                <!-- slides -->
                <swiper-slide class="swiper-slide-item" v-for="(carousel, index) in carousels" :key="index">
                    <a :href="carousel.url">
                        <img :src="carousel.imgUrl"/>
                    </a>
                </swiper-slide>
                <!-- 轮播分页 -->
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <!--  轮播图结束-->

        <div class="arclist">
            <h4 class="index-title homeh4">
                <a href="\">
                    <i class="el-certificate"></i>最新文章
                    <small>New Article</small>
                </a>
            </h4>
            <!--列表开始-->
            <ul>
                <li  v-for='blog in blogs' :key="blog.blogId" :class="isSupport(blog.support)">
                    <div class="arcimg">
                        <img :src="blog.headerImg" alt="博客图片" :title="blog.title"/>
                    </div>
                    <div class="arc-right">
                        <h4 class="blue-text">
                            <router-link :to="{name:'Article',query:{blogId:blog.blogId}}" 
                            :title="blog.title" tag="a">{{blog.title}}</router-link>                            
                        </h4>
                        
                        <p>{{blog.summary}}</p>
                        <ul>
                            <li>
                                <!-- a标签title提示的设置在showtip.js -->
                                <a href="" :title="'卑微小袁' + blog.createTime + '发表'" >
                                    <i class="el-time"></i>
                                    <span>时间：{{blog.createTime}}</span>
                                </a>
                            </li>
                            <li>
                                <router-link :to="{name:'About'}" title="作者:卑微小袁">
                                    <i class="el-user" tag="a"></i>卑微小袁
                                </router-link>                                 
                            </li>
                            <li>
                                <!--留言的数量,并能链接文章详情页(还未完全实现)-->
                                <router-link tag="a" :to="{name:'Article',query:{blogId:blog.blogId}}" :title="blog.title">
                                    <i class="el-comment"></i>
                                    <span class="cy_cmt_count"></span>
                                </router-link>                   
                            </li>
                            <li><a :title="'已有' + blog.click + '次浏览'">
                                    <i class="el-eye-open"></i>
                                    <span>已有{{blog.click}}次浏览</span>
                                </a>
                            </li>
                            <li>
                                <!-- 路由跳转传分类id -->
                                <router-link tag="a" :to="{name:'Blog_By_Category',query:{categoryId:blog.categoryId}}"
                                title="查看分类">
                                    <i class="el-th-list"></i>
                                    <span>{{blog.categoryTitle}}</span>
                                </router-link>                                 
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!--分页开始-->
        
        <page :blogPageInfo="pageInfo" @someOfPageBlogs="loadBlogs"></page>
        <!--分页结束-->
        
        
    </section>
</template>

<script>
//分页组件
import page from './page';
import {titleInit,removeMouseMethod} from '../../../static/front-vue/js/showtip';

export default {
    /*数据：{blogId:1,title:'java',headerImg:'',summary:'web技术',click:10,createTime:'2019-07-02',categoryTitle:'vue技术',support:1},
            {blogId:1,title:'c',headerImg:'',summary:'web技术',click:12,createTime:'2019-07-02',categoryTitle:'vue技术',support:1},
            {blogId:1,title:'c++',headerImg:'',summary:'web技术',click:13,createTime:'2019-07-02',categoryTitle:'vue技术',support:1},
            {blogId:1,title:'c#',headerImg:'',summary:'web技术',click:14,createTime:'2019-07-02',categoryTitle:'vue技术',support:1},
            {blogId:1,title:'php',headerImg:'',summary:'web技术',click:15,createTime:'2019-07-02',categoryTitle:'vue技术',support:0}*/
    name: 'mainly',
    components: {page},
    data () {
        return {
            blogs: [],
            //分页对象,从后台一并获取
            /*total:8,pageNum:1,pageSize:3,size:3,pages:3,prePage:null,nextPage:2,isFirstPage:true,
                    isLastPage:false,hasPreviousPage:false,hasNextPage:true,navigatePages:3,navigatepageNums:[1,2,3],navigateFirstPage:1,navigateLastPage:3*/
            pageInfo: [],
            // 轮播
            swiperOption:{
                pagination:".swiper-pagination",
                speed: 1000,    // 切换时滑动速度
                autoplay: 3000,
                loop:true,
                paginationClickable: true,
                observer:true,
                observeParents:true,
                //开启鼠标滚轮控制Swiper切换
                mousewheel: true,           
                initialSlide: 1     // 初始播放索引
            },
            // 轮播图数据
            carousels: []              
        }
    },
    beforeCreate:function() {
        
    },
    created:function() {        
        //mounted生命周期：在html渲染后执行
        this.loadBlogs();
    },   
    //激活时触发
    activated:function() {         
    },
    mounted:function() {       
    },
    updated:function() {
        //渲染完数据进行title样式的自定义
        removeMouseMethod();
        titleInit();
    },
    methods: {
        //加载用于显示博客文章数据信息,换页时加载新的博客
        loadBlogs (url) {
            var _this = this; 
            if(!url) url=""; 
                      
            this.$axios.get('/mainPage/body/allBlogs?'+url).then(resp => {
                this.$nextTick(()=>{
                    if (resp && resp.status === 200) {                    
                        _this.blogs = resp.data.myPage.list;//暂时后台传pageInfo，里面的list是blog对象                    
                        _this.pageInfo = resp.data.myPage;
                        _this.carousels = resp.data.carousels   //轮播
                    }
                })	                                
            });
           // _this.blogs = [{blogId:1,title:'java',headerImg:'',summary:'web技术',click:10,createTime:'2019-07-02',categoryTitle:'vue技术',support:1}];
            
        },
        
        //判断是否为推荐的博文
        isSupport (support) {
            if(support == 1)
                return 'tuijian';
            else
                return '';
        },
      

    }
}
</script>

<style lang="scss" scoped>
    .swiper-slide-item {
        height: 300px;
        text-align: center;
        img { // 780*300
            width:90%;
	        height:90%;
        }
    }
</style>
